$(function() {
    var currentPage = 1;
    var pageSize = 5;

    //1. 获取分类数据并渲染
    function render() {
        $.ajax({
            type: 'get',
            url: '/category/querySecondCategoryPaging',
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function(info) {
                console.log(info);
                //渲染
                $('tbody').html(template('tmp', info));
                //生成分页标签
                setPage(info.total);
            }
        });
    }

    render();

    //2. 分页
    function setPage(total) {
        $('#pagintor').bootstrapPaginator({
            bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
            currentPage: currentPage, //当前页
            totalPages: Math.ceil(total / pageSize), //总页数
            onPageClicked: function(event, originalEvent, type, page) {
                //为按钮绑定点击事件 page:当前点击的按钮值
                currentPage = page;
                //重新渲染
                render();
            }
        });
    }

    //3. 填充下拉列表的数据
    $.ajax({
        url: '/category/queryTopCategoryPaging',
        data: {
            page: 1,
            pageSize: 100
        },
        dataType: 'json',
        success: function(info) {
            console.log(info);
            //填充一级分类
            $('.dropdown-menu').html(template('tmp-cate', info));
        }
    });

    //4. 点击下拉列表选项 获取选项的值 赋值给按钮 并保存数据id 给隐藏域
    $('.cate-list').on('click', 'a', function() {
        //把当前a标签的文字赋值给按钮
        $('.title-text').text($(this).text());
        //把当前a标签的id赋值给隐藏域 便于提交
        $('.catee').val($(this).attr('data-id'));

        //当选中一级分类后 ，把状态由失败改为验证成功
        //1. 验证的字段
        //2. 状态
        //3. 提示信息
        $('#form1').data('bootstrapValidator').updateStatus('categoryId', 'VALID');
    });

    //5. 上传图片到图片服务器
    $('#file').fileupload({
        dataType: 'json',
        //当后台保存图片后的回调函数 
        //e 事件对象
        //data 后台保存图片 地址相关信息
        done: function(e, data) {
            console.log(data.result.picAddr);
            var url = data.result.picAddr;
            //根据图片地址实现图片预览
            $('#img').attr('src', url);
            //把图片服务器保存地址 赋值给隐藏域
            $('#brandLogo').val(url);
            //图片的状态设置为验证通过
            $('#form1').data('bootstrapValidator').updateStatus('brandLogo', 'VALID');
        }
    });

    //6. 添加分类表单验证
    $('#form1').bootstrapValidator({
        //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
        excluded: [],

        //2. 指定校验时的图标显示，默认是bootstrap风格
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },

        //3. 字段
        fields: {
            categoryId: {
                validators: {
                    notEmpty: {
                        message: '请选择一级分类！'
                    }
                }
            },
            brandName: {
                validators: {
                    notEmpty: {
                        message: '请输入二级分类！'
                    }
                }
            },
            brandLogo: {
                validators: {
                    notEmpty: {
                        message: '请选择图片！'
                    }
                }
            }
        }
    });

    //7. 添加二级分类 
    $('#form1').on('success.form.bv', function(e) {
        //阻止默认行为
        e.preventDefault();
        //进行表单提交
        $.ajax({
            type: 'post',
            url: '/category/addSecondCategory',
            data: $('#form1').serialize(),
            dataType: 'json',
            success: function(info) {
                console.log(info);
                if (info.success) {
                    //隐藏模态框
                    $('#modal-add').modal('hide');
                    //重新渲染
                    currentPage = 1;
                    render();
                    //重置表单的验证样式和数据
                    $('#form1').data('bootstrapValidator').resetForm(true);
                    //手动重置 一级分类按钮的文字和图片
                    $('.title-text').text('请选择一级分类');
                    $('#img').attr('src', './images/none.png');
                }
            }
        });
    });
});